<template>
	<el-dialog
		title="关联试题"
		:center="true"
		width="1057px"
		:append-to-body="true"
		:close-on-click-modal="false"
		:visible.sync="isShow"
		@close="onClose"
	>
		<div class="question-table-box" v-loading="loading">
			<!-- 筛选项 -->
			<el-form
				ref="questionForm"
				:inline="true"
				label-width="75px"
				:model="questionForm"
			>
				<el-row>
					<el-col :span="6">
						<el-form-item prop="classId" label="项目">
							<el-select
								class="refer-item"
								filterable
								v-model="questionForm.projectId"
								placeholder="请选择项目"
								@change="onChangeProject"
							>
								<el-option
									v-for="(item, index) in projectList"
									:key="index"
									:label="item.projectName"
									:value="item.projectId"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="科目" prop="subjectId">
							<el-select
								class="refer-item"
								filterable
								v-model="questionForm.subjectId"
								placeholder="请选择科目"
								@change="onChangeSubject"
							>
								<el-option
									v-for="(item, index) in subjectList"
									:key="index"
									:label="item.subjectName"
									:value="item.subjectId"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="章节" prop="chapterId">
							<el-cascader
								ref="cascaderChapter"
								placeholder="请选择章节"
								clearable
								v-model="questionForm.chapterId"
								:collapse-tags="true"
								:show-all-levels="false"
								:props="chapterProps"
								:options="chapterList"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="试题分类" prop="questioncategoryId">
							<el-select
								clearable
								filterable
								v-model="questionForm.questioncategoryId"
								placeholder="请选择试题分类"
							>
								<el-option
									v-for="item in questionCategoryList"
									:key="item.questioncategoryId"
									:label="item.questioncategoryName"
									:value="item.questioncategoryId"
								/>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="题型" prop="questionType">
							<el-select clearable v-model="questionForm.questionType" placeholder="请选择题型">
								<el-option
									v-for="(item,key) in questionTypeList"
									:key="key"
									:label="item"
									:value="key"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-input
							placeholder="请输入内容"
							clearable
							v-model.trim="content"
						>
							<el-select v-model="contentKey" slot="prepend" placeholder="请选择">
								<el-option label="题干内容" value="questionName" />
								<el-option label="试卷名称" value="paperName" />
							</el-select>
						</el-input>
					</el-col>
					<el-col :span="12">
						<div class="question-search-btn">
							<el-button
								type="primary"
								size="small"
								:loading="loading"
								@click="onSearchClick"
							>
								查询
							</el-button>
							<el-button size="small" @click="onResetClick">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<!-- 表格 -->
			<div class="question-table">
				<el-table
					ref="tableRef"
					:data="questionShowList"
					class="question-list"
					:cell-style="tableCellStyle"
				>
					<el-table-column width="55" align="center">
						<!--下面是表头的复选框，使用插槽header。实现全选以及部分选择-->
						<template #header>
							<el-checkbox
								v-model="isAllCheck"
								:indeterminate="headerIndeterminate"
								:disabled="!questionShowList.length"
								@change="handleCheckAllChange"
							/>
						</template>
						<template slot-scope="scope">
							<el-checkbox
								v-if="!scope.row.parentQuestionId"
								v-model="scope.row.isChecked"
								:indeterminate="scope.row.indeterminate"
								@change="rowSelectionChange(scope.row,scope.$index)"
							/>
						</template>
					</el-table-column>
					<el-table-column
						class="theme-border-color"
						width="55"
						label="序号"
						prop="qIndex"
						v-slot="{ row }"
						align="center"
					>
						{{ row.parentQuestionId?'':row.qIndex }}
					</el-table-column>
					<el-table-column prop="questionContent" label="试题内容">
						<template slot-scope="scope">
							<div class="question-detail">
								<el-checkbox
									v-if="scope.row.parentQuestionId"
									v-model="scope.row.isChecked"
									@change="subSelectionChange(scope.row)"
								/>
								<question-show :question="scope.row" @sub-selection-change="(checked,index)=>subSelectionChange(checked,index,scope.$index)" />
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="total-page">
				<div class="total">
					共选择：<strong class="theme_font_color">{{ selectItems.length }}</strong>个
				</div>
				<ve-pagination :get-page="getQuestionPage" :page.sync="page" />
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="onClose">取消</el-button>
				<el-button type="primary" @click="onSubmit">确定</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script src="./index.mjs"/>
<style lang="less" src="./index.less" scoped/>
